<template>
  <div>
    <el-form ref="Form" :model="Form" :rules="Rules" label-width="140px" class="business-form" auto-complete="on">
       <el-form-item prop="configName" label="配置名称">
         <el-input class="default-input" v-model="Form.configName" placeholder="请输入配置名称" />
       </el-form-item>
       <el-form-item prop="widgetType" label="组件类型">
         <el-radio v-model="Form.widgetType" label="1">文本框</el-radio>
         <el-radio v-model="Form.widgetType" label="2">开关</el-radio>
       </el-form-item>
       <el-form-item label="配置描述">
          <el-input
          type="textarea"
          :rows="4"
          placeholder="请输入内容"
          v-model="Form.configDesc">
        </el-input>

       </el-form-item>
       <el-form-item label="上一级配置名称">
         <!-- <el-input class="default-input" v-model="Form.parentId" placeholder="请输入parentId" /> -->
         <el-button type="success" @click="readVisible = true" round plain>
           选择
         </el-button>
         {{ parentName }}
       </el-form-item>
       <el-form-item>
         <el-button class="btn-submit" type="primary" v-if="id" @click.native.prevent="handleAdd">
           编辑
         </el-button>
         <el-button class="btn-submit" type="primary" v-else @click.native.prevent="handleAdd">
           新增
         </el-button>
       </el-form-item>
     </el-form>

     <el-dialog
       title="选择"
       :visible.sync="readVisible"
       width="600px"
       :before-close="remarkClose">
       <div>
         <el-tree
          node-key="id"
          ref="tree"
          :default-expanded-keys="[0]"
          highlight-current
          :expand-on-click-node="false"
          @current-change="changeCurrent"
          :load="loadNode"
          lazy
          :props="defaultProps">
        </el-tree>

       </div>
       <div style="margin-top: 20px; text-align: right">
         <el-button @click="readVisible = false">取 消</el-button>
         <el-button type="primary" @click="getCheckedNodes()">确 定</el-button>
       </div>
     </el-dialog>
  </div>
</template>

<script>
import { add, update, tree } from '@/api/business/gamesconfig'

export default {
  data() {
    return {
      defaultProps: {
        children: 'children',
        label: 'label',
        isLeaf: 'leaf'
      },
      Form: {
        configName: null,
        widgetType: null,
        parentId: null,
        configDesc: null,
      },
      Rules: {
        configName: [{
          required: true, trigger: 'blur', message: '请输入配置名称'
        }],
        widgetType: [{
          required: true, trigger: 'blur', message: '请输入组件类型'
        }],
        parentId: [{
          required: true, trigger: 'blur', message: '请输入parentId'
        }]
      },
      id: this.getUrlParams('id'),
      parentId: this.getUrlParams('parentId'),
      treeList: [],
      readVisible: false,
      configName: null,
      parentName: null
    }
  },
  created() {
    if(this.id){
      this.getData();
    }else{
    }
  },
  methods: {
    getCheckedNodes() {
      this.readVisible = false
    },
    changeCurrent(node) {
      this.Form.parentId = node.id
      this.parentName = node.displayName
    },
    loadNode(node, resolve) {
      if (node.level === 0) {
        tree({checkIdList: 0, parentId: 0}).then(res=>{
          return resolve(res);
        })
      }else{
        tree({checkIdList: 0, parentId: node.data.id}).then(res=>{
          return resolve(res);
        })
      }
    },
    remarkClose() {
      this.readVisible = false
    },
    getData() {
      this.Form = this.getlocalStorage('bGamesconfig');
      this.parentName = this.getlocalStorage('bGamesconfig').parentName
    },
    getTreeList(id) {
      tree({checkIdList: 0}).then(res=>{
        this.treeList = res
      })
    },
    handleAdd() {
      this.$refs.Form.validate(valid => {
       if (valid) {

         if(this.id){
           this.Form.id = this.id
           update(this.Form).then(res=>{
             this.actionsAfter('编辑成功！', 'success', '-1');
           })
         }else{
           add(this.Form).then(res=>{
             this.actionsAfter('新增成功！', 'success', '-1');
           })
         }

       }
     })
    }
  }
}
</script>

<style lang="css">
</style>
